<template>
    <div
      style="width: 100%; background: white; padding-left: 250px"
      class="el-scrollbar__wrap"
    >
      <div class="waybill_header">
        <div style="width: 85%">
          <div class="searchWrap" v-if="origin === 'order'">
            
          </div>
        </div>
      </div>
      <div
        class="wrapper"
        style="
          min-height: calc(100vh - 97px);
          padding-left: 50px;
          -webkit-print-color-adjust: exact;
        "
        id="printMe"
      >
      <div style="color:#303133;font-size: 14px;" v-if="data_true == true">此订单还未到签收环节</div>
     
      <div v-if="data_true == false">
        <el-form ref="form" :model="ruleForm" label-width="100px" :inline="true" :disabled="true">
        <el-form-item label="签收人" prop="sign_name">
            <el-input id="sign_name" v-model="ruleForm.sign_name"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="id_card">
            <el-input id="id_card" v-model="ruleForm.id_card"></el-input>
          </el-form-item>
          <el-form-item label="签收方式" prop="confirm_type" >
            <el-select
              id="confirm_type_down"
              v-model="ruleForm.confirm_type"
              filterable
              placeholder="请选择"
              style="width:93%"
            >
              <el-option
                id="confirm_type"
                v-for="item in signData"
                :label="item.value"
                :value="item.key + ''"
                :key="item.key"
                >{{ item.value }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="签收时间" prop="sign_time">
            <el-date-picker
              id="sign_time"
              v-model="ruleForm.sign_time"
              value-format="timestamp"
              :default-value="Date.now()"
              :clearable="false"
              type="datetime"
              placeholder="选择日期时间"
              style="width:93%"
            >
            </el-date-picker>
          </el-form-item>
          <br/>
          <div v-if="ruleForm.images != ''">
            <el-form-item label="附件:" prop="images1" ref="imgRef1" >
            <div style="display:flex">
                <UploadFile 
                id="upload_wd"
                :images.sync="ruleForm['images1']"
                v-show = "ruleForm['images1'].length > 0"
              ></UploadFile>
              <UploadFile
                id="upload_ds"
                :images.sync="ruleForm['images0']"
                v-show = "ruleForm['images0'].length > 0"
              ></UploadFile>
              <UploadFile
                id="upload_wd"
                :images.sync="ruleForm['images2']"
                v-show = "ruleForm['images2'].length > 0"
              ></UploadFile>
              <UploadFile
                id="upload_qt"
                :images.sync="ruleForm['images3']"
                v-show = "ruleForm['images3'].length > 0"
              ></UploadFile>
            </div>
          </el-form-item> 
          </div>
      
          <br/>
      </el-form>
      </div>
      </div>
    </div>
  </template>
  <script>  
    import { detailWaybillList } from "@/api/orderForm";
    import {
    signBatchList,
    SignforDetailFn
    } from "@/api/waybill";
    import UploadFile from "@/components/uploadFile/index.vue";
    import UploadLink from "@/components/uploadFile/uploadLink.vue";
    export default {
        name: "signforManage",
        components: { UploadFile,UploadLink },
        props: ["id", "origin"],
        data() {
        return {
            batchNumberId:"",
            batchList:[],
            WaybillValue:"",
            ruleForm:{
               
            },
            data_name:"呈诺再生医学科技(北京)有限公司",
            signData: [
            {
            key: "0",
            value: "签字",
            },
            {
            key: "1",
            value: "盖章",
            },

            {
            key: "2",
            value: "签字+盖章",
            },
            ],
            data_true:false

        };
        },
        computed: {},
        created() {},
        mounted() {
        this.getTempData();
        },
        methods: {
            getTempData() {
                var param = {
                    id:this.id
                }
                detailWaybillList(param).then((res) => {
                    if (res.code == "10000") {
                    var res = res.data;
                    if (res != null) {
                        this.batchNumber(res[0].WaybillId)
                    }
                    }
                })
            },
            batchNumber(id) { 
            var param = {
                id:id
            }
            signBatchList(param).then((res)=>{
                if(res.data != null) {
                    this.batchList = res.data
                    this.WaybillValue = this.batchList[0].id
                    this.SignforDetailFnChanged(this.batchList[0].id)
                    this.data_true = false
                }else {
                  this.data_true = true
                }
            })
            },
            SignforDetailFnChanged(value) {
                var param = {
                    id:value
                }
                SignforDetailFn(param).then((res) => {
                  console
                    const data = res.data;
                    if(data != "") {
                     
                      data.sign_time = data.sign_time * 1000;
                    data.images = data.images || [];
                    data.images0 =
                    data.images
                        .filter((item) => item.type === "10")
                        .map((item) => item.url) || [];
                    data.images1 =
                    data.images
                        .filter((item) => item.type === "11")
                        .map((item) => item.url) || [];
                    data.images2 =
                    data.images
                        .filter((item) => item.type === "12")
                        .map((item) => item.url) || [];
                    data.images3 =
                    data.images
                        .filter((item) => item.type === "13")
                        .map((item) => item.url) || [];
                    data.images4 =
                    data.images
                        .filter((item) => item.type === "14")
                        .map((item) => item.url) || [];
                    this.ruleForm = data;
                    }
                })
            },
            batchSelectChanged(value) {
                this.SignforDetailFnChanged(value)
            }

        },
    };
  </script>
  <style lang="scss" scoped>
  @media print {
    body {
      -webkit-print-color-adjust: exact;
    }
  }
  /deep/.el-upload--picture-card {
   display: none;
  }
  /deep/.el-form-item--mini .el-form-item__content {
    // display: flex;
  }
  .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
  }
  
  .waybill_header {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .tempTable {
    padding-bottom: 70px;
  }
  .searchWrap {
    display: inline-block;
    margin:0px 20px 20px 80px
  }
  </style>